<template>
    <el-card class="box-card" shadow="never">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <el-button @click="handleAdd" type="primary" size="small" icon="el-icon-plus">新增</el-button>
            <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
               <a-menu slot="overlay">
                 <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
               </a-menu>
               <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
             </a-dropdown> -->
        </div>
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="headerCellStyle" v-loading="loading"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
           <el-table-column prop="name" header-align="center" align="center" label="课程名称">
           </el-table-column>
           <el-table-column prop="material" header-align="center" align="center" label="出版社">
           </el-table-column>
           <el-table-column header-align="center" align="center" label="封面">
               <template slot-scope="scope">
                   <span v-if="!scope.row.image" style="font-size: 12px;font-style: italic;">无图片</span>
                     <el-image v-else
                       style="width: 80px; height: 25px"
                       :src="scope.row.image"
                       :preview-src-list="[scope.row.image]">
                     </el-image>
               </template>
           </el-table-column>
           <el-table-column fixed="right" header-align="center" align="center" width="240" label="操作">
               <template slot-scope="scope">
                   <a @click="handleEdit(scope.row)">编辑</a>
                   <el-divider direction="vertical" />
                   <el-popconfirm title="确定删除吗?" @confirm="() => handleDelete(scope.row.tjkcid)">
                       <a slot="reference">删除</a>
                   </el-popconfirm>
               </template>
           </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="ipagination.current" :page-sizes="ipagination.pageSizeOptions"
                :page-size="ipagination.pageSize" :layout="ipagination.layout" :total="ipagination.total">
            </el-pagination>
        </div>
        <course-manage-dialog ref="modalForm" @ok="modalFormOk" />
    </el-card>
</template>

<script>
    import {
        JeecgListMixin
    } from '@/utils/course/JeecgListMixin.js'
    import CourseManageDialog from './modules/CourseManageDialog.vue'
    export default {
        name: "CourseManageList",
        mixins: [JeecgListMixin],
        components: {
            CourseManageDialog
        },
        data() {
            return {
                tableData: [],
                url: {
                    list: "/tjkc",
                    delete: "/tjkc",
                },
            };
        },
        methods: {
        }
    }
</script>

<style scoped>
    a {
        color: #1890FF;
        cursor: pointer;
    }

</style>
